<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav> -->
    <keep-alive v-if="isLoggedIn">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive || !isLoggedIn"></router-view>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
  name: "App",
  mounted() {
    // window.addEventListener('resize',this.resize)
  },
  data() {
    return {
      isLoggedIn: false,
    };
  },

  watch: {
    $route() {
      // if the route changes...
      let token = getToken() || "";
      if (token) {
        // firebase returns null if user logged out
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
      this.$forceUpdate();
    },
  },
  methods: {
    resize() {
      let ratioX = window.innerWidth / 1920; //此处的宽高根据自己屏幕的比例修改即可
      let ratioY = window.innerHeight / 1080;
      document.querySelector("body").style.transform =
        "scale(" + ratioX + "," + ratioY + ")";
      document.querySelector("body").style.transformOrigin = "left top";
      document.querySelector("body").style.backgroundSize = "100% 100%";
      // ({
      //   transform: "scale(" + ratioX + "," + ratioY + ")",
      //   transformOrigin: "left top",
      //   backgroundSize: "100% 100%"
      // });
      document.querySelector("html").style.overflow = "hidden";
      // $("html").css({'overflow':'hidden'})
    },
  },
};
</script>
<style lang="scss">
@import "animate.css";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  //overflow: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //text-align: center;
  color: #fff;
  font-size: 16px;
  width: 1920px;
  height: 1080px;
}
.text {
  color: #fff;
  font-size: 16px;
}
.fs24 {
  font-size: 24px;
}
.fw {
  font-weight: 700;
}
.colorBlue {
  color: #15b7de;
}
.flexBetween {
  display: flex;
  justify-content: space-between;
}
.blueGradient {
  background: linear-gradient(to bottom, #ccf4ff, #4dcee1, #4dcee1, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

div::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 2px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  /* scrollbar-arrow-color: red; */
}

div::-webkit-scrollbar-thumb {
  border-radius: 3px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  background: #20aeff;
  height: 8px;
}
::v-deep .el-cascader__dropdown {
  background-color: #000 !important;
}
::v-deep .amap-maptype-wrap {
  background-color: rgba(10, 10, 10, 0.5);
}
</style>
